.box {
  margin-bottom: 10px;
  &-title {
    display: flex;
    padding: 10px;
    border-left: 2px solid #3399fe;
    border-bottom: 0.1px solid #eaeaea;
    background: #fff;
    &__label {
      flex: 1;
      font-size: 16px;
      align-items: center;
    }
    &__right {
      font-size: 14px;
      color: #666;
      display: flex;
    }
  }
  &-content {
    margin-bottom: 10px;
    background: #f8f8f8;
    &__item {
      display: flex;
      padding: 10px 10px 0 10px;
      font-size: 14px;
      &-label {
        color: #666;
      }
      &-value {
        flex: 1;
        padding-left: 15px;
        color: #333;
      }
    }
  }
}

.panel {
  margin-bottom: 10px;
  background: white;
  &-content {
    overflow: hidden;
    padding-top: 10px;
  }
}

.step {
  display: flex;
  font-size: 14px;
  padding-left: 15px;
  &-content {
    flex: 1;
    padding: 0 10px 15px 20px;
    position: relative;
    display: flex;

    .pab {
      position: absolute;
      display: block;
      content: ' ';
      background: #eaeaea;
    }
    &:before {
      .pab();
      left: 0;
      top: 7px;
      height: 100%;
      width: 1px;
    }
    &:after {
      .pab();
      top: 7px;
      left: -3.5px;
      width: 8px;
      height: 8px;
      border-radius: 100%;
    }
    &.active {
      &:after {
        left: -5px;
        background: #3399fe;
        border: 2px solid #a6d2ff;
      }
    }
  }
  &-item {
    flex: 1;
  }
  &-label {
    color: #999;
    font-size: 12px;
  }
  &-value {
    word-wrap: break-word;
    word-break: break-all;
  }
  &-arrow {
    display: flex;
    align-items: center;
  }
}
